<!doctype html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>悦花花 {:L('ADMIN_CENTER')}</title>
		<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta name="robots" content="noindex,nofollow">
		<link href="__TMPL__Public/assets/css/admin_login.css" rel="stylesheet" />
		<style>
			#header__login-content{
				display: none;
				position: absolute;
			}
			.header__login-box{
				background: #fff;
				z-index: 10;
				position: fixed;
				top:50%;
				left:50%;
				width:500px;
				height:250px;
				margin-left:-250px;
				margin-top:-125px;
				border:1px solid #e6e6e6;
				text-align: center;
			}
			.header__login-mask{
				background: rgba(0,0,0,.5);
				position: fixed;
				top:0;
				left:0;
				bottom:0;
				right:0;
				z-index: 6;
			}
			.header__login-content-title{
				margin-top:20px;
			}
			.header__login-close{
				position: absolute;
				right:10px;
				top:8px;
				width:16px;
				height:16px;
				background: url("/public/images/close.png");
				background-repeat:no-repeat;
				background-position: center center;
				cursor: pointer;
			}
			.header__login-thirdParty-title{
				position: relative;
				height:60px;
				line-height:60px;
				color: #666;
			}
			.header__login-thirdParty-title:before {
				position: absolute;
				top: 30px;
				left:65px;
				width: 100px;
				height: 1px;
				background: #e6e6e6;
				display: block;
				content: '';
			}
			.header__login-thirdParty-title:after{
				position: absolute;
				top: 30px;
				right:65px;
				width: 100px;
				height: 1px;
				background: #e6e6e6;
				display: block;
				content: '';
			}
			.header__login-thirdParty{
				width:100%;
			}
			.header__login-thirdParty-content span{
				padding:15px;
				cursor: pointer;
			}

			#login_btn_wraper{
				text-align: center;
			}
			#login_btn_wraper .tips_success{
				color:#fff;
			}
			#login_btn_wraper .tips_error{
				color:#DFC05D;
			}
			#login_btn_wraper button:focus{outline:none;}
			#sjyzm{
				/*width: 45%;*/
				width: 30%;
				margin-left: -75px;
			}
			#send-sms{
				float:left;
				width: 15%;
				height: 28px;
				background: #549fcc;
				overflow: visible;
				color: #fff;
				font-size: 12px;
				cursor: pointer;
				border: none;
				border-radius: 3px;
				position: relative;
				left:310px;
				top:-35px;
			}
			.sms_login{
				margin: 0;
				padding: 0;
			}
			.sms_login li{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.sms_login li input{
				margin: 5px 0;
				width: 225px;
				padding: 5px;
				vertical-align: middle;
				border: 0 none;
				background: transparent;
				font-size: 18px;
				font-family: Arial,"Microsoft Yahei";
			}
		</style>
		<script>
			if (window.parent !== window.self) {
					document.write = '';
					window.parent.location.href = window.self.location.href;
					setTimeout(function () {
							document.body.innerHTML = '';
					}, 0);
			}
		</script>
		
	</head>
<body>
	<div class="wrap">
		<h1><a>悦花花</a></h1>
		<form method="post" name="login" action="{:U('public/dologin')}" autoComplete="off" class="js-ajax-form" onsubmit="return false;">
			<div class="login">
				<ul>
					<li>
						<input class="input" id="js-admin-name" name="username" type="text" placeholder="{:L('USERNAME_OR_EMAIL')}" title="{:L('USERNAME_OR_EMAIL')}" value="{:cookie('admin_username')}" data-rule-required="true"  data-msg-required=""/>
					</li>
					<li>
						<input class="input" id="admin_pwd" type="password" name="password" placeholder="{:L('PASSWORD')}" title="{:L('PASSWORD')}" data-rule-required="true"  data-msg-required=""/>
					</li>
					<li class="verifycode-wrapper">
						{:sp_verifycode_img('length=4&font_size=20&width=248&height=42&use_noise=1&use_curve=0','style="cursor: pointer;" title="点击获取"')}
					</li>
					<li>
						<input class="input" type="text" name="verify" placeholder="{:L('ENTER_VERIFY_CODE')}" />
					</li>
				</ul>
				<div id="login_btn_wraper">
					<button type="submit" name="submit" class="btn js-ajax-submit" data-loadingmsg="{:L('LOADING')}">{:L('LOGIN')}</button>
				</div>
			</div>
		</form>
	</div>

	<!--模态框-->
	<div id="header__login-content" onclick="showLogin()"> <!--短信登录-->
		<div class="header__login-mask" onclick="hideLogin()"></div>
		<div class="header__login-box">
			<div class="header__login-close" onclick="hideLogin()"></div>
			<div class="header__login-content-title"></div>
			<div class="header__login-thirdParty">
				<div class="header__login-thirdParty-title">
					短信验证码登录验证
				</div>
				<div class="header__login-thirdParty-content">
					<ul class="sms_login">
						<li>
							<input type="text" placeholder="请输入手机号" id="userPho">
						</li>
						<li>
							<input type="text" id="sjyzm" placeholder="请输入手机验证码" autocomplete="off">
						</li>
						<li>
							<button name="gainVerify" id="send-sms" type="button">获取验证码</button>
						</li>
					</ul>
					<div>
						<button id="tjsms_code" style="margin-left:-50px;" type="button" class="btn btn-xs" data-loadingmsg="{:L('LOADING')}">{:L('LOGIN')}</button>
					</div>
				</div>
			</div>
		</div>
	</div>
<script>
var GV = {
    ROOT: "__ROOT__/",
    WEB_ROOT: "__WEB_ROOT__/",
    JS_ROOT: "public/js/"
};
</script>
<script src="__PUBLIC__/js/wind.js"></script>
<script src="__PUBLIC__/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/common.js"></script>
<script>
;(function(){
	document.getElementById('js-admin-name').focus();
})();
</script>
<script>
//    showLogin();
    function showLogin(){ //显示登录框
        gobackToCheck();//重置发送短信
        var headerLogin = document.getElementById('header__login-content');
        headerLogin.style.display = 'block';
        headerLogin.onclick = function(){
            stopEvent(event);
        }
        hideComment();
        hideFeedback();
        stopEvent(event);
    }
    function hideLogin(){ //隐藏登录框
        var headerLogin = document.getElementById('header__login-content');
        headerLogin.style.display = 'none';
    }
	//短信验证码发送过期时间
    var maxtime = 1800;//60秒
    function CountDown(){
        var sendBtn = $("#send-sms");
        if(maxtime>0){
            msg = maxtime+"秒";
            sendBtn.html(msg);
            sendBtn.css('background','#959595');
            sendBtn.addClass("disabled");
            sendBtn.prop("disabled",true);
			--maxtime;
        }
        else{
            clearInterval(timer);
            sendBtn.html("获取验证码");
            sendBtn.css('background','#549fcc');
            sendBtn.removeClass("disabled");
            sendBtn.prop("disabled",false);
            maxtime=1800;
        }
	}

	function gobackToCheck(){
        var sendBtn = $("#send-sms");
        if(typeof timer !== 'undefined'){
            clearInterval(timer);
		}
        sendBtn.html("获取验证码");
        sendBtn.css('background','#549fcc');
        sendBtn.removeClass("disabled");
        sendBtn.prop("disabled",false);
        maxtime=1800;
	}

	$(function(){
	    //发短信
		var userPho = $('#userPho');
        $('#send-sms').click(function(){
            if(!userPho.val())//判断是否为空
                return alert("请输入手机号！");
            if(!(/^1[3|4|5|7|8][0-9]\d{4,8}$/.test(userPho.val())))//判断是否满足手机号正则
                return alert("不是完整的11位手机号或者正确的手机号前七位");
            var that = $(this);
			$.ajax({
				url: '{:U("admin/public/sendsms")}',
				type: "POST",
				dataType: "JSON",
				data: {
					'username': $('#js-admin-name').val(),
					'phone': userPho.val()
				},
				beforeSend:function(){
					that.prop('disabled',true);
				},
				success: function (resp) {
                    if(parseInt(resp.status)===1){
                        timer = setInterval("CountDown()",1000);
                    }else{
                        alert(resp.msg);
                        that.prop('disabled',false);
					}
				}
			});
		});
	});
    $(function(){
        $('form').submit(function () {
            //检验角色，判断是否要弹模态框
            $.ajax({
                url: '{:U("admin/public/checkIsLoginSms")}',
                type: "POST",
                async: false,//同步
                dataType: "JSON",
                data: {
                    'username': $('#js-admin-name').val()
                },
                success: function (resp) {
                    if(1===parseInt(resp.status)){
                        showLogin();//打开模态框
                        return false;
                    }
                }
            });
            return true;
        });

        $('#tjsms_code').click(function(){
            //验证验证码
			$.ajax({
			    url: '{:U("admin/public/check_sms")}',
			    type: "POST",
                async: false,
			    dataType: "JSON",
			    data: {
                    'username': $('#js-admin-name').val(),
			        'code': $('#sjyzm').val()
			    },
			    success: function (resp) {
			        if (parseInt(resp.status) === 1) {
                        hideLogin();
			        }else{
			            alert(resp.msg);
					}
			    }
			});
            $('form').submit();//提交表单
		});
	});
</script>
</body>
</html>
